import React from 'react';
import { Image as AntImage, ImageProps } from 'antd';
import './index.scss';

type ImageTypes = {
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
  round?: any;
  radius?: string;
  block?: boolean;
} & ImageProps;

const errImage: string = '';

const clearProp = (props: ImageTypes): ImageProps => {
  let antProp = {};
  for (let key in props) {
    if (!['fit', 'round', 'radius', 'fallback', 'block', 'style', 'wrapperStyle'].includes(key)) {
      antProp[key] = props[key];
    }
  }
  return antProp
}

const Image: React.FC<ImageTypes> = (props) => {
  const antImageProps = clearProp(props);
  return <AntImage
    {...antImageProps}
    fallback={props.fallback || errImage}
    wrapperClassName={`hi-image ${props.block?'block':''}`}
    className={`${props.round ? 'hi-image-round' : ''}`}
    wrapperStyle={{ ...props.wrapperStyle }}
    style={{ borderRadius: props.radius, objectFit: props.fit, ...props.style }}
  />
}

export default Image
